<template>
  <div class="patient-manage-bg">
    <!-- 顶部栏 -->
    <van-nav-bar title="就诊人管理" left-arrow @click-left="goBack">
      <template #right>
        <van-icon name="ellipsis" size="22" />
      </template>
    </van-nav-bar>
    <!-- 顶部提示 -->
    <div class="patient-tip">最多可添加5位就诊人</div>
    <!-- 就诊人列表 -->
    <div v-for="item in patients" :key="item.id" class="patient-card">
      <div class="patient-info">
        <div class="patient-name">{{ item.name }}
          <span class="relation-tag" :class="relationTagClass(item.relation)">{{ getRelationName(item.relation) }}</span>
        </div>
        <div class="patient-phone">{{ maskPhone(item.phone) }}</div>
      </div>
      <div class="patient-actions">
        <span class="set-default">设为默认</span>
        <van-switch :model-value="item.is_default" @update:model-value="val => setDefault(item)" active-color="#338bff" size="20px" />
        <van-icon name="delete-o" size="22" color="#ccc" class="delete-icon" @click="deletePatient(item.id)" />
      </div>
    </div>
    <!-- 添加按钮 -->
    <div class="add-btn-wrap">
      <van-button type="primary" block round @click="goAddPatient">添加就诊人</van-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { showToast, showDialog } from 'vant'
import axios from 'axios'
import { useRouter } from 'vue-router'

const router = useRouter()
const patients = ref([])
const relationTypes = ref([])

function goBack() {
  router.back()
}

function maskPhone(phone) {
  if (!phone) return ''
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}

function relationTagClass(relation) {
  // relation 现在是对象，relation.id === 1 为本人
  return relation && String(relation.id) === '1' ? 'self-tag' : 'parent-tag'
}

function getRelationName(relation) {
  return relation && relation.name ? relation.name : ''
}

async function fetchPatients() {
  const token = localStorage.getItem('token')
  const headers = { Authorization: token }
  const res = await axios.get('http://127.0.0.1:8000/user/patients/', { headers })
  patients.value = res.data.data || []
}

async function fetchRelationTypes() {
  const token = localStorage.getItem('token')
  const headers = { Authorization: token }
  const res = await axios.get('http://127.0.0.1:8000/user/relationtypes/', { headers })
  relationTypes.value = res.data.data || []
}

async function deletePatient(id) {
  showDialog({
    title: '提示',
    message: '确定要删除该就诊人吗？',
  }).then(async () => {
    const token = localStorage.getItem('token')
    const headers = { Authorization: token }
    await axios.delete(`http://127.0.0.1:8000/user/patients/${id}/`, { headers })
    showToast('删除成功')
    fetchPatients()
  }).catch(() => {
    // 取消
  })
}

function setDefault(item) {
  patients.value.forEach(p => { p.is_default = false })
  item.is_default = true
  // 这里可以调用后端设置默认接口
}

function goAddPatient() {
  router.push('/add-patient')
}

onMounted(async () => {
  await fetchRelationTypes()
  await fetchPatients()
})
</script>

<style scoped>
.patient-manage-bg {
    min-height: 100vh;
  background: #f6f7fb;
}
.patient-tip {
  background: #fff4e6;
  color: #ff9900;
  font-size: 14px;
  padding: 8px 18px;
  margin: 0 0 12px 0;
}
.patient-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  margin: 12px 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.patient-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.patient-name {
  font-size: 18px;
  font-weight: 500;
  color: #222;
}
.relation-tag {
  margin-left: 8px;
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #eaf3ff;
  color: #338bff;
}
.self-tag {
  background: #eaf3ff;
  color: #338bff;
}
.parent-tag {
  background: #eaf3ff;
  color: #338bff;
}
.patient-phone {
  font-size: 15px;
  color: #888;
  margin-top: 6px;
}
.patient-actions {
    display: flex;
    align-items: center;
  margin-top: 10px;
}
.set-default {
  font-size: 15px;
  color: #888;
  margin-right: 8px;
}
.delete-icon {
  margin-left: 16px;
  cursor: pointer;
}
.add-btn-wrap {
  margin: 32px 18px 0 18px;
}
</style>
